<template>
    <div id="login-wrpper">
        <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" @submit="handleSubmit">
            <a-form-item label="username">
              <a-input
                v-decorator="['username', { rules: [{ required: true, message: 'Please input your userName!' }] }]"
              />
            </a-form-item>
            <a-form-item label="password">
                <a-input
                  v-decorator="['password', { rules: [{ required: true, message: 'Please input your password!' }] }]"
                />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 5, offset: 9 }">
              <a-button type="primary" html-type="submit">
                Submit
              </a-button>
            </a-form-item>
          </a-form>
    </div>
</template>
<script>

export default {
    name: "Login",
    data () {
        return {
            username: "",
            password: "",
            formLayout: 'horizontal',
            form: this.$form.createForm(this, { name: 'coordinated' }),
            title: "项目列表" // 测试路由传参的无效数据
        }
    },
    methods: {
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    // console.log('Received values of form: ', values);
                    // console.log(`api/_api/_decrypt/rest/mobile/login.json?account=${values.username}&password=${values.password}`)
                    // 慧点科技V5平台登录接口
                    let postUrl = `api/_api/_decrypt/rest/mobile/login.json?account=${values.username}&password=${values.password}`;
                    let params = {
                        account: values.username,
                        password: values.password,
                    };
                    this.$axios.post(postUrl, params).then(res => {
                        if(res.data){       
                            let _data = res.data.auth;     
                            // console.log(_data);
                            // 箭头函数没有this,它的this指向Vue实例
                            // 路由跳转
                            console.log(_data.token)
                            if(_data.info != "success"){
                                alert("登录失败！");
                                return;
                            }
                            // 注意使用push params传参 只能使用路由的name属性
                            this.$router.push({             //核心语句
                                name:'workspace',           //跳转的路径
                                params:{                     //路由传参时push和query搭配使用 ，作用时传递参数,
                                    title: this.title,      //query显示在路由路径后面，parms不显示
                                    token: _data.token
                                }
                            })
                        }
                    })
                }
            });
        },
    }
}
</script>
<style scoped>
    #login-wrpper {
        margin: 60px auto;
        width: 600px;

    }
</style>